<template>
    <div>
        <el-card>
            <!-- 表格 -->
            <el-table
                    :data="searchOpinionList"
                    style="width: 100%"
                    class="opinion"
                    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            >
                <el-table-column label="策略ID" prop="desc" align="center">
                </el-table-column>
                <el-table-column label="触发事件" prop="sj" align="center">
                </el-table-column>
                <el-table-column label="奖励对象" prop="phoneModel" align="center">
                </el-table-column>
                <el-table-column label="奖励" prop="ideaSourse" align="center">
                </el-table-column>
                <el-table-column label="奖励方式" prop="ideaJl" align="center">
                </el-table-column>
                <el-table-column label="已发送分数" prop="ideaFs" align="center">
                </el-table-column>
                <el-table-column label="状态" prop="inHandle" align="center">
                    <template slot-scope="scope">
                        <p :class="{ inuse: scope.row.inHandle }">
                            {{ scope.row.inHandle ? "开启" : "关闭" }}
                        </p>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="expireTime" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 编辑对话框 -->
            <el-dialog
                    title="策略配置"
                    :visible.sync="dealFormVisible"
                    width="60%"
                    center
                    class="edit">
                <!-- 内容主题部分 -->
                <el-row :gutter="20">
                    <el-col :span="16" :offset="4">
                        <el-form
                                :model="dealForm"
                                label-width="90px"
                                label-position="right">
                            <!-- 文章分类 -->
                            <el-form-item label="策略名称">
                                <el-input v-model="dealForm.response" prop="response"></el-input>
                            </el-form-item>
                            <el-form-item label="推荐人赠送红包">
                                <el-input v-model="dealForm.response" prop="response"></el-input>
                            </el-form-item>
                            <el-form-item label="被推荐人赠送红包">
                                <el-input v-model="dealForm.response" prop="response"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <!-- 确认处理提交 -->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dealFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submmitDealForm">
                        确认
                    </el-button>
                </div>
            </el-dialog>
            <!-- 分页 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchList.page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="searchList.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=count
                    align="center"
                    small
                    class="pagenation">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import { getHandler1, dealOpinionHandler} from "../../http/content";

    export default {
        name: "Opinion",
        data() {
            return {
                //count
                count: null,
                //处理模态框
                dealDialogVisible: false,
                //问题处理状态
                dealStatus: [
                    {
                        value: 2,
                        label: "全部",
                    },
                    {
                        value: 1,
                        label: "已处理",
                    },
                    {
                        value: 0,
                        label: "未处理",
                    },
                ],
                //处理模态框状态
                dealFormVisible: false,
                //处理表单
                dealForm: {
                    "id": "",
                    "response": "",
                },
                //问题处理列表
                searchList: {
                    page: 1,
                    size: 5,
                    inHandle:2,
                    suggestion: {
                        desc: "",
                    },
                },
                searchOpinionList: [],
                getOpinionList: [
                    {
                        desc: "用户1",
                        sj: "被推荐人实名",
                        phoneModel: "推荐人",
                        ideaSourse: "随机红包",
                        expireTime: "2021-02-10 10:20:10",
                        response: "1",
                        inHandle: true,
                    },
                ],
                //新增表单
                addForm:{
                    desc: "用户1",
                    sj: "被推荐人实名",
                    phoneModel: "推荐人",
                    ideaSourse: "随机红包",
                    expireTime: "2021-02-10 10:20:10",
                    response: "1",
                    inHandle: true,
                }
            };
        },
        //挂载渲染表格
        created() {
            this.searchList.page = 1;
            this.getOpinion();
        },
        methods: {
            //条件搜索
            searchOpinion() {
                this.searchList.page = 1;
                this.getOpinion();
            },
            //普通搜索
            getOpinion() {
                let path = "/suggestion/selectLikeOthers";
                getHandler1(path, this.searchList)
                    .then((res) => {
                        console.log(res, "意见数据");
                        this.searchOpinionList = res.data.data.result.agreement;
                        this.count = res.data.data.result.count;
                    })
                    .catch((err) => {
                        console.log("请求失败", err);
                    });
            },
            // 分页大小改变
            handleSizeChange(newSize) {
                this.searchList.size = newSize;
                this.searchList.page = 1;
                console.log(this.searchList, "分页大小改变请求参数");
                this.getOpinion();
            },
            //当前页改变
            handleCurrentChange(newSize) {
                this.searchList.page = newSize;
                console.log(this.searchList, "当前页改变请求参数");
                this.getOpinion();
            },
            //处理
            handleEdit(index, row) {
                this.dealFormVisible = true;
                //返回数据，自动填写处理表单
                this.dealForm.id = row.id;
                this.dealForm.response = row.response;
                console.log(this.dealForm);
            },
            //提交处理表单
            submmitDealForm() {
                let path = "/suggestion/UpdateInHandle";
                dealOpinionHandler(path, this.dealForm)
                    .then((res) => {
                        if (res.data.code != 20000) {
                            this.nowId = null;
                            return this.$message.error(res.data.message);
                        }
                        this.dealFormVisible = false;
                        this.$message.success("编辑成功");
                        this.nowId = null;
                        this.getOpinion();
                    })
                    .catch((err) => {
                        this.$message.error(err);
                    });
            },
            //编辑
            editDialogClosed() {
                this.$refs.dealFormRef.resetFields();
            }
        },
    };
</script>

<style scoped lang="less">
    .el-table {
        margin-top: 20px;
    }
    //启用状态
    .inuse {
        color: #009900;
    }
    // 分页
    .pagenation{
        margin-top: 20px;
    }
</style>
